<template>
  <div>
    <div class="top">
      <div class="time">
        <p>{{ month }}</p>
        <p>月</p>
      </div>
      <div class="week-item" v-for="(item, index) in dates" :key="index" :style="{'background': (index + 1) % 7 === new Date().getDay() ? '#eee' : '#fff'}">
        <p class="week">{{ item.week }}</p>
        <p class="date">{{ item.day }}</p>
      </div>
    </div>
    <div class="content">
      <div class="row" v-for="(item, index) in rows" :key="index">
        <div class="row-first">
          <p>{{ index + 1 }}</p>
          <p>{{ times[index] }}</p>
        </div>
        <div class="item" v-for="(e, i) in item" :key="i" @click="clickItem">
          <span
            v-if="e"
            @click.stop="clickSpan(e)"
            :style="{height: e.colspan * 60 + 'px', background: colors[i % 5]}">
            {{ e.title }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getWeekDate} from '../utils'
export default {
  name: 'calendar',
  data () {
    return {
      weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      dates: [],
      times: ['08:00 08:40', '08:50 09:00', '09:10 09:50', '10:00 10:40', '10:50 11:30', '14:00 14:40', '14:50 15:30', '15:40 16:20', '16:30 17:10'],
      rows: [
        [{title: '高数D', colspan: 2}, '', '', '', '', '', ''],
        ['', '', '', '', {title: '应用英语', colspan: 2}, '', ''],
        ['', '', {title: '高数D', colspan: 2}, '', '', '', ''],
        ['', '', '', '', '', '', {title: '应用英语', colspan: 2}],
        ['', '', '', {title: '应用英语', colspan: 2}, '', '', ''],
        ['', {title: '高数D', colspan: 2}, '', '', '', '', ''],
        ['', '', '', '', '', '', ''],
        ['', '', '', '', '', '', ''],
        ['', '', '', '', '', '', '']
      ],
      colors: ['#FADD5D', '#AD90FC', '#76ECEA', '#AEEB38', '#71EB5A'],
      target: null,
      cover: null,
      month: new Date().getMonth() + 1
    }
  },
  methods: {
    clickSpan (clazz) {
      console.log(clazz)
      this.$emit('getCourse', clazz)
    },
    clickItem (e) {
      if (!this.editor) {
        return
      }
      if (this.target) {
        this.target.removeChild(this.cover)
      }
      let dom = document.createElement('div')
      dom.className = 'cover-item'
      dom.onclick = (ev) => {
        this.$emit('toAddCourse')
        ev.stopPropagation()
      }
      dom.innerText = '+'
      e.target.appendChild(dom)
      this.target = e.target
      this.cover = dom
    }
  },
  props: ['editor'],
  created () {
    getWeekDate().forEach((item, index) => {
      this.dates.push({
        week: this.weeks[index],
        day: item
      })
    })
  }
}
</script>

<style scoped>
  .top{
    width: 100%;
    display: flex;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
    box-sizing: border-box;
    align-items: center;
  }
  .content{
    box-sizing: border-box;
  }
  .top .time{
    width: 40px;
    flex-shrink: 0;
    flex-grow: 0;
    text-align: center;
  }
  .top .time p{
    color: #999;
  }
  .top .week-item{
    flex: 1;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  }
  .week-item .week{
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .week-item .date{
    font-size: 12px;
  }
  .row{
    width: 100%;
    display: flex;
    height: 60px;
  }
  .row .row-first{
    flex-grow: 0;
    flex-shrink: 0;
    width: 40px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #f8f8f9;
  }
  .row .row-first p:nth-child(1){
    line-height: 20px;
    font-weight: bold;
  }
  .row .item{
    flex: 1;
    height: 100%;
    border-bottom: 1px dashed #eee;
    position: relative;
  }
  .row .item span{
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-radius: 5px;
    color: #fff;
    box-sizing: border-box;
    padding: 4px;
    font-size: 12px;
    z-index: 2;
    box-shadow: 2px 2px 4px #ddd;
  }
</style>
